<template>
  <div class="order-container">
    <div class="order-list">
<!--      <div class="order list-item" v-for="order in orders" :key="order.id">-->
<!--        <div class="head flex-box">-->
<!--          <div>-->
<!--            <span class="id">订单编号：{{ order.orderId }}</span>-->
<!--            <span class="time">{{ order.time }}</span>-->
<!--          </div>-->
<!--          <div>-->
<!--            <span>发票状态：{{ order.invoiceStatus }}</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="order-main flex-box">-->
<!--          <div class="cover-title">-->
<!--            <div class="cover img-box">-->
<!--              <img :src="order.cover" alt="cover">-->
<!--            </div>-->
<!--            <div class="title">{{ order.title }}</div>-->
<!--          </div>-->
<!--          <div class="count">x {{ order.count }}</div>-->
<!--          <div class="way">{{ order.way }}</div>-->
<!--          <div class="order-status">{{ order.orderStatus }}</div>-->
<!--          <div class="amount">￥{{ order.amount }}</div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderView",
  data() {
    return {
      orders: [
        {
          id: 123,
          orderId: '1657527527752653',
          time: '2022-5-1',
          cover: 'https://cdn.pixabay.com/photo/2022/04/10/09/02/cats-7122943__340.png',
          title: '谁的东西',
          count: 3,
          way: '微信',
          orderStatus: '已完成',
          invoiceStatus: '未开具',
          amount: 49
        },
        {
          id: 124,
          orderId: '1657527527752653',
          time: '2022-5-1',
          cover: 'https://cdn.pixabay.com/photo/2022/04/10/09/02/cats-7122943__340.png',
          title: '这个又是是谁的东西啊啊',
          count: 3,
          way: '微信',
          orderStatus: '已完成',
          invoiceStatus: '未开具',
          amount: 49
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.order {
  background: #f6f7fb;
  margin-bottom: 20px;
}

.head, .order-main {
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #7a7a7a;
}

.head {
  height: 46px;

  .id {
    margin-right: 25px;
  }
}

.order-main {
  margin: 0 2px;
  height: 108px;
  border-radius: 10px 10px 0 0;
  background: #fff;
  .cover-title {
    flex-basis: 280px;
  }
  .cover {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  .title {
    display: inline-block;
    width: 200px;
    height: 60px;
    /*overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/

    font-size: 16px;
    color: black;
    vertical-align: top;
  }
}
</style>
